<template>
  <div class="supplier-info-wrap">
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-col :span="24">
        <el-form-item label="审批单号：" prop="sn" style="margin-bottom: 0px;">
          <ToolTip :content="supplierInfo.sn" placement="top-start"/>
        </el-form-item>
      </el-col>
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="8">
          <el-form-item label="供应商名称：" prop="channelName" style="margin-bottom: 0px;">
            <ToolTip :content="supplierInfo.channelName" :class="{'link':supplierInfo.channelId}" placement="top-start" @click.native="toSupplierDetail"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：" prop="createUser" style="margin-bottom: 0px;">
            <CheckUserInfo :user-id="supplierInfo.creatorId" :label="supplierInfo.createUser" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属部门：" prop="departmentName" style="margin-bottom: 0px;">
            <ToolTip :content="supplierInfo.departmentName" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商类型：" prop="supplierType" style="margin-bottom: 0px;">
            <ToolTip :content="supplierInfo.supplierType | supplierType" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商编号：" prop="supplierNum" style="margin-bottom: 0px;">
            <el-tooltip v-if="supplierInfo.channelSn" class="item" placement="top-start" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ supplierInfo.channelSn }}</div>
              <div class="ellipsis">{{ supplierInfo.channelSn }}</div>
            </el-tooltip>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="可抵扣税率：" prop="taxRate" style="margin-bottom: 0px;">
            <ToolTip :content="(supplierInfo.taxRate || supplierInfo.taxRate===0)?`${supplierInfo.taxRate}%`:''" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col v-if="isPersonal" :span="8">
          <el-form-item label="性别：" prop="proposerDepartmentName" style="margin-bottom: 0px;">
            <ToolTip :content="supplierInfo.sex | sexStatus " placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col v-if="isPersonal" :span="8">
          <el-form-item label="手机号码：" prop="phone" style="margin-bottom: 0px;">
            <!--<SystemText :log-text="getLogText('手机号码')" :origin-text="supplierInfo.phone" />-->
            <ToolTip :content="supplierInfo.phone"/>
          </el-form-item>
        </el-col>
        <el-col v-if="isPersonal" :span="8">
          <el-form-item :label="isPersonal?'身份证：':'营业执照：'" prop="idCard" style="margin-bottom: 0px;">
            <div class="ellipsis">
              <!--
              <SystemText
                v-if="supplierInfo.idCard && supplierInfo.idCard.length"
                :log-text="getLogText(supplierInfo.supplierType === 0?'身份证':'营业执照')"
                data-type="field" >
                <template slot="field">
                  <FileShowList :file-list="supplierInfo.idCard" style="max-width:100%;" is-show-single-file />
                </template>
              </SystemText>
              -->
              <FileShowList
                v-if="supplierInfo.idCard && supplierInfo.idCard.length"
                :file-list="supplierInfo.idCard"
                style="max-width:100%;"
                is-show-single-file />
              <span v-else>--</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col v-if="isCompany" :span="8">
          <el-form-item label="纳税人识别号：" prop="taxpayerIdentificationNumber" style="margin-bottom: 0px;">
            <ToolTip :content="supplierInfo.taxpayerIdentificationNumber" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地域：" prop="region" style="margin-bottom: 0px;">
            <SystemText :log-text="getLogText('地域')" :origin-text="handleRegion(supplierInfo.region)" :operation-modular-type="37"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="快递地址：" prop="address" style="margin-bottom: 0px;">
            <SystemText :log-text="getLogText('快递地址')" :origin-text="supplierInfo.address" :operation-modular-type="37"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微信号：" prop="wxCode" style="margin-bottom: 0px;">
            <SystemText :log-text="getLogText('微信号')" :origin-text="supplierInfo.wxCode" :operation-modular-type="37"/>
          </el-form-item>
        </el-col>
        <el-col v-if="isCompany" :span="8">
          <el-form-item label="合作状态：" prop="cooperationStatus" style="margin-bottom: 0px;">
            <ToolTip :content="supplierInfo.cooperationStatus===0?'正常合作':'终止合作'" placement="top-start"/>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="签约话术截图：" prop="signedScreenshot" style="margin-bottom: 0px;">
            <div class="ellipsis">
              <FileShowList :file-list="supplierInfo.signedScreenshot" style="max-width:100%;" is-show-single-file />
            </div>
          </el-form-item>
        </el-col> -->
        <el-col v-if="isPersonal" :span="8">
          <el-form-item label="刊例状态：" prop="publishedStatus" style="margin-bottom: 0px;">
            <ToolTip :content="supplierInfo.publishedStatus | articlesStatus" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注：" prop="remark" style="margin-bottom: 0px;">
            <SystemText :log-text="getLogText('备注')" :origin-text="supplierInfo.remark" :operation-modular-type="37"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import FileShowList from '@/components/CreateOrder/fileShowList';
import SystemText from '@/components/Common/systemText';
import { sexStatus, articlesStatus, supplierType } from './status';

export default {
  components: {
    FileShowList,
    SystemText
  },
  filters: {
    sexStatus,
    articlesStatus,
    supplierType
  },
  props: {
    supplierInfo: {// 详情信息
      type: Object,
      default: () => {}
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isPersonal() { // 供应商类型：个人
      return this.supplierInfo.supplierType === 0;
    },
    isCompany() { // 供应商类型：公司
      return this.supplierInfo.supplierType === 1;
    }
  },
  methods: {
    handleRegion(region = '') {
      return region ? region.replace(/,/g, '-') : '';
    },
    // 跳转销售供应商
    toSupplierDetail() {
      if (this.supplierInfo.channelId) {
        const url = this.$router.resolve({
          name: 'supplierManageDetail',
          params: { id: this.supplierInfo.channelId }
        });
        window.open(url.href, '_blank');
      }
    },
    getLogText(label) {
      return `签约内审 ${this.supplierInfo.sn} 的 ${label}`;
    }
  }
};
</script>
<style lang="scss" scoped>
  .supplier-info-wrap{
    .supplier-form {
      & ::v-deep {
        .el-form-item {
            .el-form-item__label {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #999999 !important;
              opacity: 1;
              line-height: 30px;
            }
          }
          .el-form-item__content {
            font-size: 14px;
            font-family: PingFang SC;
            line-height: 30px;
            font-weight: 400;
            color: #333333;
            opacity: 1;
          }
      }
    }
    .link{
      color: #406EFF;
      cursor: pointer;
    }
    .dividing{
      &::v-deep {
        .el-col {
          .el-form-item__content {
            border-right: 1px solid #EBEEFD;
          }
          &:nth-child(3n) {
            .el-form-item__content {
              border-right: none;
            }
          }
          &:last-child {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
      }
    }
  }
</style>
